<template>
  <div class="el-text-test">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>测试 Element Plus Text 组件</span>
        </div>
      </template>
      
      <div class="test-section">
        <h3>基本用法</h3>
        <div class="demo-item">
          <el-text>默认文本</el-text>
        </div>
        
        <h3>不同类型</h3>
        <div class="demo-item">
          <el-text type="primary">主要文本</el-text>
          <el-text type="success">成功文本</el-text>
          <el-text type="warning">警告文本</el-text>
          <el-text type="danger">危险文本</el-text>
          <el-text type="info">信息文本</el-text>
        </div>
        
        <h3>不同大小</h3>
        <div class="demo-item">
          <el-text size="large">大型文本</el-text>
          <el-text>默认大小</el-text>
          <el-text size="small">小型文本</el-text>
        </div>
        
        <h3>文本截断</h3>
        <div class="demo-item">
          <div style="width: 200px;">
            <el-text truncated>
              这是一段很长的文本，将会被截断。这是一段很长的文本，将会被截断。这是一段很长的文本，将会被截断。
            </el-text>
          </div>
        </div>
        
        <h3>文本省略</h3>
        <div class="demo-item">
          <div style="width: 200px;">
            <el-text ellipsis :lines="2">
              这是一段很长的文本，将会被省略。这是一段很长的文本，将会被省略。这是一段很长的文本，将会被省略。这是一段很长的文本，将会被省略。这是一段很长的文本，将会被省略。
            </el-text>
          </div>
        </div>
        
        <h3>标签类型</h3>
        <div class="demo-item">
          <el-text tag="b">粗体文本</el-text>
          <el-text tag="i">斜体文本</el-text>
          <el-text tag="u">下划线文本</el-text>
          <el-text tag="del">删除线文本</el-text>
          <el-text tag="s">删除线文本</el-text>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
// 不需要任何导入或定义，因为这个组件没有状态或方法
</script>

<style>
.el-text-test {
  margin: 20px 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.test-section {
  margin-top: 10px;
}

.demo-item {
  margin: 10px 0 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

h3 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #606266;
}
</style>